{% extends 'base.html' %}

{% block content %}
    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
        <h1 class="h2">配置OPCUA服务器</h1>
        <form class="row g-3">
            <div class="col-md-6">
                <label for="endpoint" class="form-label">endpoint Example:opc.tcp://0.0.0.0:4840</label>
                <input type="text" class="form-control" id="endpoint" placeholder="opc.tcp://0.0.0.0:4840"
                       value="opc.tcp://0.0.0.0:4840">
            </div>
            <div class="col-md-6">
                <label for="uri" class="form-label">uri:Example:https://compamy.com</label>
                <input type="text" class="form-control" id="uri" placeholder="https://compamy.com">
            </div>
            {#            地址空间1#}
            <div class="col-1">
                <label class="form-check-label" for="folder1_active">
                    激活
                </label>
                <input class="form-check-input" type="checkbox" id="folder1_active" aria-label="...">
            </div>

            <div class="col-3">
                <label for="folder1" class="form-label">地址空间1</label>
                <input type="text" class="form-control" id="folder1">
            </div>

            <div class="col-8">
                <label for="folder1_tags" class="form-label">地址空间1-变量点[地址与地址之间请使用空格进行分割]</label>
                <textarea class="form-control" id="folder1_tags" rows="3"></textarea>
            </div>

            {#            地址空间2#}
            <div class="col-1">
                <label class="form-check-label" for="folder2_active">
                    激活
                </label>
                <input class="form-check-input" type="checkbox" id="folder2_active" aria-label="...">
            </div>

            <div class="col-3">
                <label for="folder2" class="form-label">地址空间2</label>
                <input type="text" class="form-control" id="folder2">
            </div>

            <div class="col-8">
                <label for="folder2_tags" class="form-label">地址空间2-变量点</label>
                <textarea class="form-control" id="folder2_tags" rows="3" placeholder=""></textarea>
            </div>

            {#            地址空间3#}
            <div class="col-1">
                <label class="form-check-label" for="folder3_active">
                    激活
                </label>
                <input class="form-check-input" type="checkbox" id="folder3_active" aria-label="...">
            </div>

            <div class="col-3">
                <label for="folder3" class="form-label">地址空间2</label>
                <input type="text" class="form-control" id="folder3">
            </div>

            <div class="col-8">
                <label for="folder3_tags" class="form-label">地址空间2-变量点</label>
                <textarea class="form-control" id="folder3_tags" rows="3"></textarea>
            </div>

            <div class="col-6">
                <button class="btn btn-primary" id="createRun" type="button">Create & Run</button>
            </div>
            <div class="col-6">
                <button class="btn btn-primary" id="moniter" type="button">Start Moniter</button>
            </div>
        </form>
        <h1 class="h2">OPCUA服务器运行状态</h1>
    </main>
    <script src="../static/js/socket.io.js"></script>
    <script type="application/javascript">
        $(function () {
                $("#createRun").on("click", function () {
                    $.ajax({
                        //请求的方式：get/post
                        type: "post",

                        //请求的url地址
                        url: "/opcua_server",

                        //这次请求要携带的数据（不需要参数可以省略）
                        data: {
                            "endpoint": $("#endpoint").val(),
                            "uri": $("#uri").val(),

                            "folder1_active": $("#folder1_active").is(":checked"),
                            "folder1": $("#folder1").val(),
                            "folder1_tags": $("#folder1_tags").val(),

                            "folder2_active": $("#folder2_active").is(":checked"),
                            "folder2": $("#folder2").val(),
                            "folder2_tags": $("#folder2_tags").val(),

                            "folder3_active": $("#folder3_active").is(":checked"),
                            "folder3": $("#folder3").val(),
                            "folder3_tags": $("#folder3_tags").val(),
                        },

                        dataType: "json",
                        //请求成功之后的回调函数
                        success: function (res) {
                            if (!res.status) {
                                alert(res.message)
                                console.log(res)
                            }
                        },
                        error: function (res) {
                            alert('error' + res.data)
                        }
                    })
                });
                $("#moniter").on("click", function () {
                    $.ajax({
                        //请求的方式：get/post
                        type: "post",

                        //请求的url地址
                        url: "/bg/moniter",

                        //这次请求要携带的数据（不需要参数可以省略）
                        data: {

                        },

                        dataType: "json",
                        //请求成功之后的回调函数
                        success: function (res) {
                            if (!res.status) {
                                alert(res.message)
                                console.log(res)
                            }else{
                                console.log(res.message)
                            }
                        },
                        error: function (res) {
                            alert('error' + res.data)
                        }
                    })
                });
                var socket = io('http://127.0.0.1:5555/real');

                socket.on('connect', function () {
                    console.log('connected')
                });
                socket.on('disconenct', function () {
                    console.log('disconnected')
                    alert('websocket service is disconnected!')
                })
                socket.on('message', function (data) {
                    console.log('从后端传递过来的数据：' + JSON.stringify(data));
                });
            }
        )
    </script>
{% endblock %}